<template>
    <div class="basicinformation">
        <memberCentreNav></memberCentreNav>
        <div class="writing_right">
            <div class="TitleList">
                <div class="TitleList_padding">
                    <div class="TitleList_top">
                        <div class="TitleList_top_title"><span></span>基本信息</div>
                    </div>
                </div>
                <div class="basicinformation_cotnent">
                    <div class="basicinformation_cotnent_list">
                        <div class="cotnent_list_dd">昵称</div>
                        <div class="cotnent_list_dt">
                            <el-input
                                placeholder="请输入昵称"
                                v-model="name"
                                clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="basicinformation_cotnent_list">
                        <div class="cotnent_list_dd">省份</div>
                        <div class="cotnent_list_dt">
                            <el-input
                                placeholder="请输入省份"
                                v-model="province"
                                clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="basicinformation_cotnent_list">
                        <div class="cotnent_list_dd">地址</div>
                        <div class="cotnent_list_dt">
                            <el-input
                                placeholder="请输入详细地址"
                                v-model="address"
                                clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="basicinformation_cotnent_list on">
                        <div class="cotnent_list_dd">电子邮件</div>
                        <div class="cotnent_list_dt">{{ $store.getters.memberInfo.email ? $store.getters.memberInfo.email : '未绑定邮箱' }}</div>
                        <router-link v-if="$store.getters.memberInfo.email" to="/memberCentre/basicInformation/emailFirstStep" class="cotnent_list_btn">修改</router-link>
                        <router-link v-else to="/memberCentre/basicInformation/emailStepTwo" class="cotnent_list_btn">修改</router-link>
                    </div>
                    <div class="basicinformation_cotnent_list on">
                        <div class="cotnent_list_dd">移动电话</div>
                        <div class="cotnent_list_dt">{{ $store.getters.memberInfo.phone }}</div>
                        <router-link to="/memberCentre/basicInformation/mobileFirstStep" class="cotnent_list_btn">修改</router-link>
                    </div>
                    <div class="basicinformation_cotnent_list flexend">
                        <div class="cotnent_list_submit" @click="updateMember">保存信息</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    import memberCentreNav from "@c/common/memberCentreNav/memberCentreNav";

    export default {
        name: "basicinformation",
        data() {
            return {
                name: '',
                province: '',
                address: ''
            };
        },
        components: {
            memberCentreNav
        },
        methods:{
          getMember(){
            let that = this;
            that.axios.get('/api/member/getInfo').then(res => {
              if(res.code === 1) {
                localStorage.setItem('memberInfo', JSON.stringify(res.result) )
                that.$store.commit('setMemberInfo', res.result)
                that.name = res.result.name;
                that.province = res.result.province;
                that.address = res.result.address;
              }
            })
          },
          updateMember(){
            let that = this;
            that.axios.post('/api/member/update', {
              name: that.name,
              province: that.province,
              address: that.address
            }).then(res=>{
              if(res.code === 1) {
                that.$message.success('保存信息成功！')
                that.getMember()
              }
            })
          }
        },
        mounted() {
          this.getMember()
        },
    }
</script>

<style>
  @import "basicInformation.css";
</style>
